<template>
    <div ref="lottieRef" class="lottieStyle"></div>
    <div class="noMsgStyle">
        <!-- <div class="noMsgTextStyle">当前没有会话哦，赶快创建一个吧！</div> -->
        <span class="clickCreateBtnStyle" @click="clickCreateBtn"
        :style="clickCreateStyle['marginLeft'] + clickCreateStyle['color']">let's start!</span>
    </div>
</template>
<script setup>
import lottie from "lottie-web";
import { onMounted, ref,getCurrentInstance, reactive, onBeforeUnmount, watch,nextTick} from 'vue'
import _bus from '@/utils/bus'

const { proxy } = getCurrentInstance()

let sheepJson = new URL('@/assets/lotties/chatPhone.json', import.meta.url).href
let lot = ref()
onMounted(()=>{
    // 需要判断localStorage里有无已创建的谈话，如果删掉localS...也要一起删
    createLottieImg()
    clickCreateBtnChange()
})
const createLottieImg = ()=>{
    if(lot.value != null){
        lot.value.destroy()
    }
    lot.value = lottie.loadAnimation({
        container: proxy.$refs[`lottieRef`], //渲染动画所需容器
        renderer: "svg",//动画渲染类型，svg/canvas/html
        loop: true,//是否循环播放，布尔值
        autoplay: false,//是否自动播放，布尔值
        path: sheepJson // the path to the animation json
    })
    lot.value.setSpeed(1)
    lot.value.play()
}
let timerMap = reactive({
    timer1:'',
    timer2:''
})
let clickCreateStyle = reactive({
    color : '',
    marginLeft : ''
})
const clickCreateBtnChange = ()=>{
    let finish = true
    setTimeout(() => {
        clickCreateStyle.marginLeft = finish ? 'margin-left: calc(100% - 74.77px);' : 'margin-left: 0;'
    }, 1);
    timerMap['timer1'] = setInterval(() => {
        finish = !finish
        clickCreateStyle.marginLeft = finish ? 'margin-left: calc(100% - 74.77px);' : 'margin-left: 0;'
    }, 2000);

    setTimeout(() => {
        clickCreateStyle.color = `color:rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)});`
    }, 1);
    timerMap['timer2'] = setInterval(() => {
        clickCreateStyle.color = `color:rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)});`
    }, 500);
}
onBeforeUnmount(()=>{
    clearInterval(timerMap['timer1'])
    clearInterval(timerMap['timer2'])   
})

const clickCreateBtn = ()=>{
    _bus.emit('bus_clickCreateBtn')
}

</script>
<style scoped lang="scss">
.lottieStyle{
    position: absolute;
    width: 120%;
    left: 50%;
    transform: translate(-50%,-3%);
    top: 0;
    // height: 20rem;
}
.noMsgStyle{
    height: 100%;
    position: relative;
    .noMsgTextStyle{
        // background-color: rgb(176, 203, 255);
        background: linear-gradient(to right, #c7e6ff, #e6dcff);
        position: absolute;
        padding: 10px;
        border-radius: 5px;
        line-height: 2.5rem;
        width: 75%;
        left: 50%;
        transform: translateX(-50%);
        box-shadow: -3px -3px 15px -5px black;
    }
    .clickCreateBtnStyle{
        position: absolute;
        transition: margin-left 2s ease-in-out,color .5s ease-in-out;
        margin-left: 0;
        // margin-left: calc(100% - 64px);
        margin-top: 5rem;
        color:rgb(0, 0, 0);
        // color: red;
        bottom: 100px;
    }
}
</style>